<form class="layui-form " action="" lay-filter="dataForm">
    <input type="hidden" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">规则名称</label>
        <div class="layui-input-inline">
            <label class="layui-form-label" style="text-align: left;padding-left: 0; width:600px;">
                顺丰快递
            </label>
        </div>
    </div>

    <div id="tableDiv"></div>


    <button type="button" class="layui-btn addArea" style="margin-bottom: 20px">
        <i class="layui-icon layui-icon-add-1"></i>添加省份
    </button>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="dataSubmit">保存</button>
        </div>
    </div>

    <div id="areaDiv"></div>

</form>
<style>
    #areaDiv{
        display:none;
        position: fixed;
        top: 200px;
        background: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        z-index: 2;
    }
</style>
<script id="areaTpl" type="text/html">
    {{# layui.each(d, function(index, item){ }}
    <input type="checkbox" title="{{ item.area || '' }}" value="{{ item.area || '' }}" lay-filter="areaCheckbox" class="lineSelect" lay-skin="primary"> =>
        {{# layui.each(item.province, function(idx, it){ }}
        <input type="checkbox" title="{{ it || '' }}" data-c="1" data-p="{{ item.area || '' }}" value="{{ it || '' }}" lay-skin="primary">
        {{# }); }}    
    <br>
    {{# }); }}
    
    <button type="button" class="layui-btn areaOk" >
        确定
    </button>
    <button type="button" class="layui-btn areaCancel">
        取消
    </button>
</script>
<script id="tableTpl" type="text/html">
    <table class="layui-table">
    <thead>
        <tr>
            <th>配送省份</th>
            <th>首重（0~1.1Kg）</th>
            <th>续重（每超出1Kg）</th>
        </tr>
    </thead>
    <tbody>
        {{# layui.each(d, function(index, item){ }}
        <tr>
            <td><textarea style="z-index: 1;" type="text" class="layui-input layui-table-edit areaInput" data-index="{{index}}" data-item="area" name="table[{{index}}][area]" >{{ item.area || '' }}</textarea></td>
            <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="first_weight"
                    name="table[{{index}}][first_weight]" value="{{ item.first_weight || '0' }}" /></td>
            <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="continue_weight"
                    name="table[{{index}}][continue_weight]" value="{{ item.continue_weight || '0' }}" /><i class="layui-icon layui-table-tips-c layui-icon-close"></i></td>
        </tr>
        {{# }); }}
        {{# if(d.length === 0){ }}
        <tr>
            <td colspan="6">无规格</td>
        </tr>
        {{# } }}
    </tbody>
</table>
</script>
<script>
    layui.use(['form', 'http', 'laytpl'], function () {
        var form = layui.form;
        var http = layui.http;
        var laytpl = layui.laytpl;
        var $ = layui.$;
        //表单初始赋值
        form.val('dataForm', {
            "id": "{$info.id}",
            "name": "{$info.name}",
        })
        //监听提交
        form.on('submit(dataSubmit)', function (data) {
            http.post('/postage/edit', data.field, function (res) {
                if (res.code == 0) {
                    parent.layui.table.reload('dataTable');
                    parent.layer.closeAll('page');
                    window.location.reload()
                }
            }, $(this))
            return false;
        })

        var areaArr = [{
                'area': '华东',
                'province': ['上海', '江苏', '浙江', '安徽', '江西']
            },
            {
                'area': '华北',
                'province': ['北京', '天津', '山西', '山东', '河北', '内蒙古']
            },
            {
                'area': '华中',
                'province': ['湖南', '湖北', '河南']
            },
            {
                'area': '华南',
                'province': ['广东', '广西', '福建', '海南']
            },
            {
                'area': '东北',
                'province': ['辽宁', '吉林', '黑龙江']
            },
            {
                'area': '西北',
                'province': ['陕西', '新疆', '甘肃', '宁夏', '青海']
            },
            {
                'area': '西南',
                'province': ['重庆', '云南', '贵州', '西藏', '四川']
            },
            {
                'area': '港澳台',
                'province': ['香港', '澳门', '台湾']
            },
        ]

        var tableData = {$info.table};

        var getTpl = tableTpl.innerHTML,
            view = document.getElementById('tableDiv');
        laytpl(getTpl).render(tableData, function (html) {
            view.innerHTML = html;
        });

        form.on('checkbox(areaCheckbox)', function (data) {
            if ($(data.elem).hasClass("lineSelect")) {
                $('input:checkbox[data-p="' + data.value + '"]').prop("checked", data.elem.checked)
                form.render()
            }
        });

        $(".addArea").on('click', function () {
            tableData.push({
                'area': '',
                'first_weight': 0,
                'continue_weight': 0
            })
            console.log('添加后', tableData)
            laytpl(getTpl).render(tableData, function (html) {
                view.innerHTML = html;
            });
        })

        $("body").on('focus', '.areaInput', function () {
            var getAreaTpl = areaTpl.innerHTML,
                areaView = document.getElementById('areaDiv');
            laytpl(getAreaTpl).render(areaArr, function (html) {
                areaView.innerHTML = html
                form.render()
            });
            $("#areaDiv").data('pidx', $(this).data('index')).show(300).css('top', $(this).offset().top+40)
        })


        $("body").on('click', '.layui-table .layui-icon-close', function (e) {
            var index = $(".layui-table .layui-icon-close").index($(this))
            tableData.splice(index, 1) 
            console.log('删除后', tableData)
            laytpl(getTpl).render(tableData, function (html) {
                view.innerHTML = html;
            });
        })

        $("body").on('click', '.areaOk', function () {
            var selectArea = $('input:checkbox[data-c=1]:checked').map(function (index, elem) {
                return $(elem).val()
            }).get().join(',')
            console.log(selectArea)
            var index = $("#areaDiv").data('pidx')
            $('.areaInput').eq(index).val(selectArea)
            tableData[index]['area'] = selectArea
            $("#areaDiv").hide(300)
        })

        $("body").on('click', '.areaCancel', function () {
            $("#areaDiv").hide(300)
        })

        $("body").on('blur', '.layui-table-edit', function () {
            var index = $(this).data('index')
            var item = $(this).data('item')
            tableData[index][item] = $(this).val()
            console.log(tableData)
        })


    })
</script>